<template>
  <div>
    <!-- logo 登录链接 -->

    <!-- 一楼 -->
    <div>
      <div class="fws-zdy-bacc clearfix fixed-top bg-light">
        <div class="container d-flex zdy-bd">
          <div class="p-1 flex-grow-1 bd-highlight zdy-logo">
            <img
              @click="GoToIndex"
              src="../assets/logoRect.jpg"
              class="rounded-3"
            />
            <span class="fw-bold ms-3">请选择城市：</span>
            <el-cascader :options="options" clearable></el-cascader>
          </div>

          <div class="d-flex align-items-center">
            <div
              class="d-none me-2"
              :class="{ zdy_fws_display_n: zdy_fws_display_n == true }"
            >
              <form class="d-flex" role="search">
                <input
                  class="form-control me-3 rounded-pill"
                  type="search"
                  placeholder="请输入学科"
                  aria-label="Search"
                />
                <button class="btn btn-outline-success" type="submit">
                  搜索
                </button>
              </form>
            </div>
            <div class="p-1 bd-highlight" @click="ShowLogin">
              <a href="javascript:;" class="text-decoration-none">{{

                  $store.state.Studentislogin?($store.state.Studentislogin?'欢迎学生:'+$store.state.Studentislogin:'用户登录'):($store.state.Teacherislogin?'欢迎教师:'+$store.state.Teacherislogin:'用户登录')
                  
              }}</a>
            </div>
            <div
              v-if="$store.state.Studentislogin || $store.state.Teacherislogin"
              class="p-1 bd-highlight"
              @click="QuitLogin"
            >
              <a href="javascript:;" class="text-decoration-none">退出登录</a>
            </div>
            <div
              v-show="!$store.state.Studentislogin || !$store.state.Teacherislogin"
              class="p-1 bd-highlight fw-bold"
            >
              |
            </div>
            <div v-show="!$store.state.Studentislogin || !$store.state.Teacherislogin" class="p-1 bd-highlight" @click="ShowDialog">
              <a href="javascript:;" class="text-decoration-none">我要做家教</a>
            </div>
            <div v-show="!$store.state.Studentislogin || !$store.state.Teacherislogin" class="p-1 bd-highlight fw-bold">--</div>
            <div v-show="!$store.state.Studentislogin || !$store.state.Teacherislogin" class="p-1 bd-highlight" @click="ShowDialog">
              <a href="javascript:;" class="text-decoration-none">我要找家教</a>
            </div>
            <el-dialog
              append-to-body
              class="fws-zdy-dialog-bg"
              :visible.sync="$store.state.dialogVisible"
              width="35%"
              :before-close="handleClose"
            >
              <div class="fws-zdy-loginindex w-100 fws-zdy-bgimage">
                <div
                  class="
                    d-flex
                    justify-content-betweeen
                    text-center
                    fws-zdy-btn-position
                  "
                >
                  <el-button type="success" plain @click="ShowRegister"
                    >注册</el-button
                  >
                  <el-button type="success" @click="ShowLogin" plain
                    >登录</el-button
                  >
                </div>
              </div>
            </el-dialog>
            <!-- 注册界面 -->
            <el-dialog
              append-to-body
              class="fws-zdy-dialog-bg"
              :visible.sync="$store.state.dialogVisibleRegister"
              width="35%"
            >
              <div
                style="height: 360px"
                class="
                  fws-zdy-register-backimage
                  d-flex
                  justify-content-between
                "
              >
                <div class="w-50" style="margin-left: 50%">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="学生注册" name="second">
                      <el-input
                        class="mt-4"
                        placeholder="请输入手机号"
                        v-model="sphone"
                        clearable
                      >
                      </el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请输入密码"
                        v-model="spwd"
                        show-password
                      ></el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请确认密码"
                        v-model="spwd"
                        show-password
                      ></el-input>
                      <el-button
                        class="mt-5 w-100"
                        type="success"
                        plain
                        @click="studentRegister"
                        >学生注册</el-button
                      >
                    </el-tab-pane>
                    <el-tab-pane label="教师注册" name="first">
                      <el-input
                        class="mt-4"
                        placeholder="请输入手机号"
                        v-model="tphone"
                        clearable
                      >
                      </el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请输入密码"
                        v-model="tpwd"
                        show-password
                      ></el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请确认密码"
                        v-model="tpwd"
                        show-password
                      ></el-input>
                      <el-button
                        class="mt-5 w-100"
                        type="success"
                        plain
                        @click="teacherRegister"
                        >教师注册</el-button
                      >
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-dialog>

            <!-- 登录界面 -->
            <el-dialog
              append-to-body
              class="fws-zdy-dialog-bg"
              :visible.sync="$store.state.dialogVisibleLogin"
              width="35%"
            >
              <div
                style="height: 360px"
                class="
                  fws-zdy-register-backimage
                  d-flex
                  justify-content-between
                "
              >
                <div class="w-50" style="margin-left: 50%">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="学生登录" name="second">
                      <el-input
                        class="mt-4"
                        placeholder="请输入手机号"
                        v-model="sphone"
                        clearable
                      >
                      </el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请输入密码"
                        v-model="spwd"
                        show-password
                      ></el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请确认密码"
                        v-model="spwd"
                        show-password
                      ></el-input>
                      <el-button
                        class="mt-5 w-100"
                        type="success"
                        plain
                        @click="StudentLogin"
                        >学生登录</el-button
                      >
                    </el-tab-pane>
                    <el-tab-pane label="教师登录" name="first">
                      <el-input
                        class="mt-4"
                        placeholder="请输入手机号"
                        v-model="tphone"
                        clearable
                      >
                      </el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请输入密码"
                        v-model="tpwd"
                        show-password
                      ></el-input>
                      <el-input
                        class="mt-4"
                        placeholder="请确认密码"
                        show-password
                        v-model="tpwd"
                      ></el-input>
                      <el-button
                        class="mt-5 w-100"
                        type="success"
                        plain
                        @click="TeacherLogin"
                        >教师登录</el-button
                      >
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-dialog>
          </div>
        </div>

        <!-- <div class="d-flex zdy-bd fixed-top container">
        <div class="p-1 flex-grow-1 bd-highlight zdy-logo">
          <img src="../assets/logoRect.jpg" class="rounded-3" />
        </div>
        <div class="p-1 bd-highlight"><a href=""> 用户登录</a></div>
        <div class="p-1 bd-highlight fw-bold">|</div>
        <div class="p-1 bd-highlight"><a href="">我要做家教</a></div>
        <div class="p-1 bd-highlight fw-bold">--</div>
        <div class="p-1 bd-highlight"><a href="">我要找家教</a></div>
      </div> -->
      </div>
      <!-- 二楼 -->
      <div class="container zdy-margin-top"></div>
      <!-- 导航 -->
      <div class="container bg-light">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div
              class="collapse navbar-collapse zdy-a-color"
              id="navbarSupportedContent"
            >
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    aria-current="page"
                    href="javascript:;"
                    @click="GoToIndex"
                    >首页</a
                  >
                </li>
                <li class="nav-item" @click="GoDetail">
                  <a class="nav-link" href="javascript:;">教师库</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">资料库</a>
                </li>
                <li class="nav-item dropdown">
                  <a
                    class="nav-link dropdown-toggle"
                    href="#"
                    id="navbarDropdown"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    请家教
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">大学生家教</a></li>
                    <li><a class="dropdown-item" href="#">专职家教</a></li>
                    <li>
                      <a class="dropdown-item" href="#">金牌教师</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link">优秀案例</a>
                </li>
              </ul>
              <form class="d-flex" role="search">
                <input
                  class="form-control me-2 rounded-pill"
                  type="search"
                  placeholder="请输入学科"
                  aria-label="Search"
                /><button class="btn btn-outline-success" type="submit">
                  搜索
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div>
      <div class="fws-zdy-fixed">
        <img src="/home_right_kid.png" alt="" />
      </div>
      <ul
        class="list-unstyled fws-zdy-ul-width text-center p-2 shadow-lg bg-body"
      >
        <li class="mt-2 rounded-3 p-2 fw-bold border-bottom border-light">
          优秀教师
        </li>
        <li class="mt-2 rounded-3 p-2 fw-bold border-bottom border-light">
          学员信息
        </li>
        <li class="mt-2 rounded-3 p-2 fw-bold border-light">热点资讯</li>
        <li class="mt-2 rounded-3 p-2 fw-bold border-light" @click="ShowDialog">
          注册登录
        </li>
        <li class="mt-2 rounded-3 p-2 fw-bold border-light">
          <!-- <el-button slot="reference">N0.1热线</el-button>
         -->
          <el-popover
            placement="bottom"
            title="热线电话"
            trigger="hover"
            content="No.1联系热线:18888888888"
          >
            <span slot="reference">N0.1热线</span>
          </el-popover>
        </li>
      </ul>
      <el-backtop>
        <div
          class="fs-3 btn btn-secondary"
          type="button"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
        >
          <el-tooltip content="返回顶部" placement="top">
            <i class="el-icon-upload2"></i>
          </el-tooltip>
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script>
import LoginRegister from "./LoginRegister.vue";
export default {
  components: { LoginRegister },
  inject:['reload'],
  data() {
    return {
      sphone: "",
      spwd: "",
      tphone: "",
      tpwd: "",
      activeName: "second",
      // dialogVisibleLogin: false,
      // dialogVisibleRegister: false,
      // dialogVisible: false,
      // ShowLogin: false,
      zdy_fws_display_n: false,
      options: [
        {
          value: "beijing",
          label: "北京",
          children: [
            {
              value: "beijingshi",
              label: "北京市",
              children: [
                {
                  value: "changpingqu",
                  label: "昌平区",
                },
                {
                  value: "haidianqu",
                  label: "海淀区",
                },
                {
                  value: "chaoyangqu",
                  label: "朝阳区",
                },
                {
                  value: "daxingqu",
                  label: "大兴区",
                },
                {
                  value: "dongchengqu",
                  label: "东城区",
                },
                {
                  value: "xichengqu",
                  label: "西城区",
                },
                {
                  value: "chongwenqu",
                  label: "崇文区",
                },
                {
                  value: "xuanwuqu",
                  label: "宣武区",
                },
                {
                  value: "fengtaiqu",
                  label: "丰台区",
                },
                {
                  value: "shijingshanqu",
                  label: "石景山区",
                },
                {
                  value: "mentougouqu",
                  label: "门头沟区",
                },
                {
                  value: "fangshanqu",
                  label: "房山区",
                },
                {
                  value: "tongzhouqu",
                  label: "通州区",
                },
                {
                  value: "shunyiqu",
                  label: "顺义区",
                },
                {
                  value: "huairouqu",
                  label: "怀柔区",
                },
                {
                  value: "pingguqu",
                  label: "平谷区",
                },
              ],
            },
          ],
        },
        {
          value: "henansheng",
          label: "河南省",
          children: [
            {
              value: "zhoukoushi",
              label: "周口市",
              children: [
                {
                  value: "chuanhuiqu",
                  label: "川汇区",
                },
                {
                  value: "xiangchengshi",
                  label: "项城市",
                },
                {
                  value: "fugouxian",
                  label: "扶沟县",
                },
                {
                  value: "chengguanzhen",
                  label: "城关镇",
                },
                {
                  value: "xihuaxian",
                  label: "西华县",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.showSearch);
  },

  methods: {
    QuitLogin() {
      
      sessionStorage.removeItem("tphone");
      sessionStorage.removeItem("sphone");
      window.location.reload();
      this.$router.push('/')
    },
    ShowRegister() {
      this.$store.commit("ShowRegister", true);
    },
    ShowDialog() {
      this.$store.commit("ShowDialog", true);
    },
    ShowLogin() {
      if (
        this.$store.state.Studentislogin ||
        this.$store.state.Teacherislogin
      ) {
        return;
      } else {
        this.$store.commit("ShowLogin", true);
      }
    },
    GoDetail() {
      this.$router.push("/detail");
    },
    teacherRegister() {
      let parems = `tphone=${this.tphone}&tpwd=${this.tpwd}`;
      this.axios.post("/teacher/register", parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.dialogVisibleRegister = false;
          this.dialogVisible = false;
          alert("注册成功");
          this.$router.push("/aboutus");
        } else {
          alert("手机号已被注册");
        }
      });
    },
    studentRegister() {
      let parems = `sphone=${this.sphone}&spwd=${this.spwd}`;
      this.axios.post("/student/register", parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.dialogVisibleRegister = false;
          this.dialogVisible = false;
          alert("注册成功");
          this.$router.push("/aboutus");
        } else {
          alert("手机号已被注册");
        }
      });
    },
    StudentLogin() {
      sessionStorage.setItem("sphone", this.sphone);
      let parems = `sphone=${this.sphone}&spwd=${this.spwd}`;
      this.axios.post("/student/login", parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          
          this.$store.state.dialogVisibleLogin = false;
          this.$store.state.dialogVisible = false;
          
          this.$router.push('/aboutus')
          
          
        } else {
          alert("用户名或密码错误");
        }
      });
    },
    TeacherLogin() {
      let parems = `tphone=${this.tphone}&tpwd=${this.tpwd}`;
      this.axios.post("/teacher/login", parems).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$store.state.dialogVisibleLogin = false;
          this.$store.state.dialogVisible = false;
         
          sessionStorage.setItem("tphone", this.tphone);
          this.$router.push("/teacherlogin");
          //  window.location.reload();
        } else {
          alert("用户名或密码错误");
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    GoToIndex() {
      this.$router.push("/");
    },
    ShowLoginRgister() {
      this.$store.commit("ShowLogin", true);
      console.log(this.$store.state.close);
    },
    showSearch() {
      // 获取当前滚动条向下滚动的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 当页面滚动到高度300px处时，显示搜索框
      if (scrollTop > 100) {
        this.zdy_fws_display_n = true;
      } else {
        this.zdy_fws_display_n = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .fws-zdy-bacc {
//   background-color: rgba($color: #008c8c, $alpha: 0.8);
//   margin: 0;
// }
.zdy-bd {
  line-height: 50px;
  // background-color: rgba($color: #008c8c, $alpha: 0.8);
  color: #000;
  div:nth-child(2) {
    a:hover {
      color: orange;
    }
  }
  div:nth-child(4) {
    a:hover {
      color: orange;
    }
  }
  div:nth-child(6) {
    a:hover {
      color: orange;
    }
  }
  a {
    color: #000;
    text-decoration: none;
  }

  .zdy-logo {
    img {
      width: 45px !important;
    }
  }
}
.zdy-bg {
  background-color: rgba($color: #008c8c, $alpha: 0.4) !important;
}
.zdy-logo1 {
  width: 100px;
}
.zdy-margin-top {
  margin-top: 56px;
  line-height: 60px;
  background-color: rgba($color: #008c8c, $alpha: 0.4);
}
.zdy-a-color {
  font-size: 15px;
  a {
    &:hover {
      color: #008c8c;
      font-weight: 700;
    }
  }
}
.btn {
  width: 100px;
}
.zdy_fws_display_n {
  display: inline-block !important;
}
.fws-zdy-bgimage {
  background-image: url("/public/loginbg1.jpg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
  height: 35vh;
  position: relative;
  .fws-zdy-btn-position {
    position: absolute;
    bottom: 0px;
    left: 35%;
  }
}
.fws-zdy-register-backimage {
  background-image: url("/public/loginbg2.jpg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
}
.fws-zdy-ul-width {
  // background-color: azure;
  user-select: none;
  width: 70px;
  position: fixed;
  top: 17%;
  left: 95.6%;
  border-radius: 10px;
  li:nth-child(4) {
    background-color: #ff5a00;
  }
  li {
    &:hover {
      background-color: orange;
      color: white;
    }
  }
}
.fws-zdy-fixed {
  position: fixed;
  // position: fixed;
  top: 13%;
  left: 95%;
  z-index: 100;
}
.fws-zdy-dialog-bg {
  background-color: rgba($color: #000000, $alpha: 0.6);
}
</style>